<template>
  <div class="custom-body" :style="borderStyle">
    <el-button type="primary" class="button-logout" icon="el-icon-switch-button" @click="open">注销登录</el-button>
    <div v-if="systemList" class="custom-iframe">
      <iframe v-for="(item,index) in systemList" :key="'iframe-'+index" :src="item.url+item.logoutUrl" />
    </div>
  </div>
</template>

<script>
import { queryAllSystem } from '@/api/system/usystem';
import Config from '@/settings';
import { clearAllCookie } from '@/utils/auth';
export default {
  name: 'AppDividerV1',
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      column: null,
      titleFontSize: { fontSize: '16px' },
      contentFontSize: { fontSize: '13px' },
      systemList: [],
      columnStyle: {}
    };
  },
  computed: {
    borderStyle() {
      if (this.temp.sfdzqp === true) {
        return { position: 'absolute', left: '0px', right: '0px', top: '0px', bottom: '0px' };
      }
      return { height: this.temp.defaultHeight };
    },
    liStyle() {
      const width = (100 / this.column.row).toFixed(2);
      const height = (100 / Math.ceil(this.column.size / this.column.row)).toFixed(2);
      return { width: width + '%', height: height + '%' };
    }
  },
  watch: {
    layout: {
      handler(newName, old) {
        this.columnStyle = newName;
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx);
          this.column = pzx;
          this.titleFontSize = { fontSize: this.column.titleFontSize + 'px', backgroundColor: this.columnStyle.mrzt };
          this.contentFontSize = { fontSize: this.column.contentFontSize + 'px' };
        } else {
          const pzx = JSON.parse(newData.pzx);
          this.column = pzx;
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      });
    },
    logout() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading'
      });
      queryAllSystem().then(res => {
        const { content } = res;
        this.systemList = content;
        this.$store.dispatch('LogOut').then(() => {
          clearAllCookie();
          if (Config.isCas) {
            setTimeout(() => {
              loading.close();
            }, 600);
            window.location.href = Config.casLogout + '/uc/index';
          } else {
            setTimeout(() => {
              loading.close();
            }, 600);
            location.reload();
          }
        }).catch(() => {
          clearAllCookie();
          if (Config.isCas) {
            setTimeout(() => {
              loading.close();
            }, 600);
            window.location.href = Config.casLogout + '/use/index';
          } else {
            setTimeout(() => {
              loading.close();
            }, 600);
            location.reload();
          }
        });
      }).catch(() => {
        this.$store.dispatch('LogOut').then(() => {
          clearAllCookie();
          if (Config.isCas) {
            loading.close();
            window.location.href = Config.casLogout + '/uc/user';
          } else {
            loading.close();
            location.reload();
          }
        }).catch(() => {
          clearAllCookie();
          if (Config.isCas) {
            loading.close();
            window.location.href = Config.casLogout + '/use/user';
          } else {
            loading.close();
            location.reload();
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0px 15px;
  box-sizing: border-box;
}
.button-logout {
  width: 100%;
}
</style>
